<template>
  <div :ref="info._id" v-ui-ref="vSetRef" class="overflow-y-scroll" :class="{ hidden: conditionProperty.hidden }">
    <div
      class="border-dotted border-b-1 border-gray-500"
      style="height: 30px; border-style: dashed"
      :style="[{ borderBottomWidth: hasPreview ? '' : '1px' }]"
    >
      <!-- <Widget :list="info.list[0] && info.list[0].list ? info.list[0].list : []" /> -->
      <div class="flex font-extrabold uiCirculationForm-box">
        <p>批次属性序号</p>
        <p>属性名称</p>
        <p>输入控制类型</p>
        <p>输入格式类型</p>
        <p>输入内容选项</p>
        <p>PDA是否显示</p>
        <p>关键属性</p>
        <p>光标停留</p>
      </div>
    </div>

    <el-form v-if="!hasPreview" :id="'uiCirculationForm_' + info._id" :inline="true" :model="selfFormData" style="height: 60px">
      <!-- <Widget :list="info.list[1] && info.list[1].list ? info.list[1].list : []" /> -->
      <div class="flex uiCirculationForm-box">
        <el-form-item label="">
          <el-input v-model.lazy="dropFrom.LOT_SEQ" clearable />
        </el-form-item>
        <el-form-item label="">
          <el-input v-model.lazy="dropFrom.LOT_SEQ_NAME" clearable />
        </el-form-item>
        <el-form-item label="">
          <el-select v-model.lazy="dropFrom.INPUT_CONTROL_TYPE" clearable placeholder="请选择">
            <el-option v-for="v in options" :key="v.value" :label="v.label" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model.lazy="dropFrom.INPUT_FORMAT_TYPE" clearable placeholder="请选择">
            <el-option v-for="v in options1" :key="v.value" :label="v.label" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model.lazy="dropFrom.INPUT_OPTIONS" clearable placeholder="请选择">
            <el-option v-for="v in inputOptions" :key="v.value" :label="v.label" :value="v.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-switch v-model.lazy="dropFrom.PDA_DISPLAY" active-value="Y" inactive-value="N" />
        </el-form-item>
        <el-form-item label="">
          <el-switch v-model.lazy="dropFrom.KEY_LOT" active-value="Y" inactive-value="N" />
        </el-form-item>
        <el-form-item label="">
          <el-switch v-model.lazy="dropFrom.CUR_LOT" active-value="Y" inactive-value="N" />
        </el-form-item>
      </div>
    </el-form>
    <el-form
      v-else
      :id="'uiCirculationForm_' + info._id"
      ref="uiCirculationForm_from"
      class="overflow-y-scroll"
      :inline="true"
      :model="selfFormData"
      style="height: 360px"
    >
      <template v-if="selfFormData.data && selfFormData.data.length > 0">
        <template v-for="(item, i) in selfFormData.data" :key="i">
          <div v-if="defer(i)" class="flex uiCirculationForm-box">
            <el-form-item label="" :prop="`data.${i}.LOT_SEQ`">
              <el-input v-model.lazy="item.LOT_SEQ" clearable disabled />
            </el-form-item>
            <el-form-item label="" :prop="`data.${i}.LOT_SEQ_NAME`">
              <el-input
                v-model.lazy="item.LOT_SEQ_NAME"
                clearable
                :disabled="item.LOT_SEQ === 'LOT01' || item.LOT_SEQ === 'LOT02' || item.LOT_SEQ === 'LOT03' || item.LOT_SEQ === 'LOT04'"
              />
            </el-form-item>
            <el-form-item label="" :prop="`data.${i}.INPUT_CONTROL_TYPE`" :rules="uiCirculationFormRule.INPUT_CONTROL_TYPE">
              <el-select v-model.lazy="item.INPUT_CONTROL_TYPE" clearable placeholder="请选择">
                <el-option v-for="v in options" :key="v.value" :label="v.label" :value="v.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="" :prop="`data.${i}.INPUT_FORMAT_TYPE`" :rules="uiCirculationFormRule.INPUT_FORMAT_TYPE">
              <el-select
                v-model.lazy="item.INPUT_FORMAT_TYPE"
                clearable
                :disabled="item.LOT_SEQ === 'LOT01' || item.LOT_SEQ === 'LOT02' || item.LOT_SEQ === 'LOT03' || item.LOT_SEQ === 'LOT04'"
                placeholder="请选择"
              >
                <el-option v-for="v in options1" :key="v.value" :label="v.label" :value="v.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="" :prop="`data.${i}.INPUT_OPTIONS`">
              <el-select
                v-model.lazy="item.INPUT_OPTIONS"
                clearable
                :disabled="item.LOT_SEQ === 'LOT01' || item.LOT_SEQ === 'LOT02' || item.LOT_SEQ === 'LOT03' || item.LOT_SEQ === 'LOT04'"
                placeholder="请选择"
              >
                <el-option v-for="v in inputOptions" :key="v.CODE_ID" :label="v.CODE_DESCRC" :value="v.CODE_ID" />
              </el-select>
            </el-form-item>
            <el-form-item label="" :prop="`data.${i}.PDA_DISPLAY`">
              <el-switch v-model.lazy="item.PDA_DISPLAY" active-value="Y" inactive-value="N" />
            </el-form-item>
            <el-form-item label="" :prop="`data.${i}.KEY_LOT`">
              <el-switch v-model.lazy="item.KEY_LOT" active-value="Y" inactive-value="N" />
            </el-form-item>
            <el-form-item label="" :prop="`data.${i}.CUR_LOT`">
              <el-switch v-model.lazy="item.CUR_LOT" active-value="Y" inactive-value="N" />
            </el-form-item>
          </div>
          <!-- <uiForm v-if="item" :info="item" /> -->
        </template>
      </template>
    </el-form>
  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ConditionMixin } from '@ve/mixin'
  // import { componentId } from '@/utils/unique'
  // import uiForm from '../uiForm/uiForm.vue'
  import cloneDeep from 'lodash/cloneDeep'
  import trim from 'lodash/trim'
  import isArray from 'lodash/isArray'
  import isEmpty from 'lodash/isEmpty'
  import { processingConstant } from '@ve/utils/utils'
  import request from '@/utils/request'
  import { GFCD } from '@/utils/utils'
  // import { getModelInfo } from '@ve/utils/getModelInfo'

  export default defineComponent({
    name: 'UiCirculationForm',
    components: {
      // 使用异步组件
      // Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
      // uiForm,
    },
    mixins: [UiMixin, RefsInjectMixin, ConditionMixin],
    provide() {
      return {
        formId: this.info._id,
      }
    },
    props: {},
    data() {
      return {
        list: [],
        pageId: '',
        oldFormData: {},
        oldInfoList: [],
        // newData: {},
        testList: [],
        dropFrom: {},
        inputOptions: [],
        frameCount: 0,
        rafId: '',
        uiCirculationFormRule: {
          INPUT_CONTROL_TYPE: [{ required: true, message: '请选择控制类型！', trigger: 'blur' }],
          INPUT_FORMAT_TYPE: [{ required: true, message: '请选择格式类型！', trigger: 'blur' }],
        },
        options1: [
          {
            value: '10',
            label: '字符',
          },
          {
            value: '20',
            label: '整数',
          },
          {
            value: '30',
            label: '数字',
          },
          {
            value: '40',
            label: '日期',
          },
          {
            value: '50',
            label: '日期时间',
          },
          {
            value: '60',
            label: '日期输入',
          },
          {
            value: '70',
            label: '日期时间输入',
          },
        ],
        options: [
          {
            value: '10',
            label: '可选',
          },
          {
            value: '20',
            label: '必填',
          },
          {
            value: '30',
            label: '只读',
          },
          {
            value: '40',
            label: '禁用',
          },
        ],
      }
    },
    computed: {
      selfFormData() {
        return this.info.data.requestData
      },
      getExtension() {
        return this.info.extension
      },
      getInfo() {
        return this.info
      },
      getInfoList() {
        return this.info.list[1].list
      },
      relevanceData() {
        return this.getInfo.extension.getFrom &&
          this.getInfo.extension.getFrom.value[0] &&
          this.vuiComponents[this.getInfo.extension.getFrom.value[0]]
          ? this.vuiComponents[this.getInfo.extension.getFrom.value[0]].self.getInfo.data.formData
          : {}
      },
    },
    watch: {
      selfFormData: {
        immediate: true,
        handler: function (val) {
          if (isEmpty(val)) return
          if (this.hasPreview) {
            if (val.data.length > 0) {
              this.updateFrameCount()
            }
            setTimeout(() => {
              this.getEndData(this.relevanceData)
            }, 100)
          }
        },
      },
      getInfoList: {
        deep: true,
        handler(newVal) {
          // console.log(newVal)
          if (newVal.length == 1 && !this.hasPreview) {
            this.info.moudleList = cloneDeep(newVal)
          }
        },
      },
    },
    created() {
      if (
        Object.keys(this.info.oldFormData).length == 0 ||
        Object.keys(this.info.oldFormData).length != Object.keys(this.info.data.formData).length
      ) {
        this.info.oldFormData = cloneDeep(this.info.data.formData)
      }
    },
    mounted() {
      if (this.hasPreview) {
        // this.info.dataList = this.getCols()
        this.getinputOptions()
        // this.updateFrameCount()
        // cancelAnimationFrame(this.rafId)
        // setTimeout(() => {
        //   this.frameCount = 0
        //   cancelAnimationFrame(this.rafId)
        // }, 10000)
      }
    },
    unmounted() {
      cancelAnimationFrame(this.rafId)
    },
    methods: {
      updateFrameCount() {
        this.rafId = requestAnimationFrame(() => {
          console.log('updateFrameCount', this.frameCount)
          this.frameCount++
          if (this.frameCount >= 5) {
            return
          }
          this.updateFrameCount()
        })
      },
      defer(n) {
        return this.frameCount * 10 >= n
      },
      async getinputOptions() {
        let res = await request({
          url: GFCD('dams', 'domain') + '/wms/wms-web',
          method: 'post',
          data: {
            data: JSON.stringify({ '#LIMIT#': 1, '#PAGE_SIZE#': 99, ORG_ID: '#ORG_ID#', CODE: '#APP_CODE#' }),
            method: 'wms.system.codeheader.components.select',
          },
        })
        this.inputOptions = res.data['wms.system.codeheader.components.select'].data
      },
      getEndData(val) {
        if (this.getInfo.extension.bindFromKey.value && this.getInfo.extension.fromKey.value) {
          console.log('requestListData', this.selfFormData)
          this.info.data.requestListData = {
            [this.getInfo.extension.bindFromKey.value]: val,
            [this.getInfo.extension.fromKey.value]: this.selfFormData.data,
          }
          console.log('this.info.data.requestListData=========', this.info.data.requestListData)
        } else {
          this.info.data.requestListData = this.getInfoRequest(this.info.dataList)
        }
      },
      getInfoRequest(list) {
        let arr = []
        for (let index = 0; index < list.length; index++) {
          const element = list[index]
          arr.push(element.data.formData)
        }
        return arr
      },
      dataSourceChange(newval) {
        // if (this.getInfo.extension.defaultRow.value && Object.keys(this.selfFormData).length == 0) return
        if (this.getInfo.dataSourceBind.hasParam.value) {
          let _mergeData = {}
          // 根据 getDataKey 筛选需要的数据
          if (!trim(this.dataSource.getDataKey)) {
            // 如果没有 getDataKey 则返回全量数据
            _mergeData = newval
          } else {
            const keyList = this.dataSource.getDataKey.split(',')
            isArray(keyList) &&
              keyList.forEach((item) => {
                if (newval[item] !== undefined) {
                  // 如果传过来的对象里面没有要取得值 则丢弃
                  _mergeData[item] = newval[item]
                }
              })
          }
          // console.log('_mergeData ----------------------- ', cloneDeep(_mergeData))
          // this.newData = _mergeData
          this.getInfo.data.formData = {
            ...this.getInfo.data.formData,
            ..._mergeData,
          }
          //数据源变化后重新执行
          // if (this.dataSourceChangeIndex != 0) {
          //   this.onLoad()
          // }
        } else {
          this.list = newval.data
        }
        // this.dataSourceChangeIndex++
      },
      //获取自定义请求参数
      $getRequestData() {
        let _data = {}
        if (this.getExtension.requestData && isArray(this.getExtension.requestData.value)) {
          this.getExtension.requestData.value.forEach((item) => {
            _data[item.key] = processingConstant(this, item.value)
          })
        }
        return _data
      },
    },
  })
</script>
<style lang="scss" scoped>
  :deep() {
    .el-form-item__label {
      display: none;
    }
    .uiCirculationForm-box {
      p,
      .el-form-item {
        flex: 1;
      }
      p {
        font-size: 12px;
      }
    }
  }
</style>
